import { defineStore } from 'pinia'
// @ts-ignore
import { allColumnList } from '@/libs/map.js'
import {fileController} from '@/api/file/fileController'
import { useMessage } from 'naive-ui'
export const FilePanStore = defineStore('File-pan-store', {
    state: (): any => ({
        // 表格中显示的列
        selectedColumnList: localStorage.getItem('selected_column_list'),
        // 文件展示模式 0 列表模式 | 1 网格模式 | 2 时间线模式
        fileModel: localStorage.getItem('file_model'),
        // 网格模式 & 时间线模式下 图标大小 单位px
        gridSize: localStorage.getItem('grid_size')
            ? Number(localStorage.getItem('grid_size'))
            : 80,
        // 批量模式下：被选中的文件列表
        selectedFiles: [],
        // 是否批量操作：true - 批量，false - 单文件
        isBatchOperation: false,
        // 文件已占用存储空间大小
        storageValue: 0 ,
        totalStorageValue: 0 ,
        // 屏幕宽度
        screenWidth: document.body.clientWidth,
    }),
    getters:{
        // // 表格显示列
        getSelectedColumnList: (state) =>
            state.selectedColumnList === null
                ? allColumnList
                : state.selectedColumnList.split(','),
        // 文件查看模式
        getFileModel: (state) =>
            state.fileModel === null ? 0 : Number(state.fileList.fileModel),
        // 网格模式 & 时间线模式下 文件图标大小
        getGridSize: (state) => state.gridSize,
        getScreenWidth: (state) => state.screenWidth,
        // 剩余存储空间
        remainderStorageValue: (state) =>
            state.totalStorageValue - state.storageValue,
        // 获取时候批量操作
        getIsBatchOperation: (state) => state.isBatchOperation,
        getSelectedFiles: (state) => state.selectedFiles
    },

    actions: {

       /**
        * 设置是否批量操作
        */
        setIsBatchOperation(data: boolean) {
            this.$state.isBatchOperation = data
        },
       /**
         * 保存文件已占用的存储空间大小
         * @param {number} data 存储大小
         */
        setStorageValue(data: number) {
            this.$state.storage = data
        },
        setTotalStorageValue(data: number) {
            this.$state.totalStorageValue = data
        },

        /**
         * 获取文件已占用的存储空间
         */
        showStorage():void {
            fileController.getStorage().then(res => {
                this.setStorageValue(res.data.storageValue)
                this.setTotalStorageValue(res.data.totalStorageValue)
            }).catch(err => {
                const message = useMessage()
                message.error(err)
            })
        },

        /**
         * 改变表格显示列
         * @description 表格显示列保存在 Vuex 和 cookie 中
         * @param {[]} data 表格需要显示的列数组
         */
        changeSelectedColumnList(data:any) {
            localStorage.setItem('selected_column_list', data.toString());
            this.$state.selectedColumnList = data.toString();
        },
        /**
         * 改变文件展示模式
         * @description 文件展示模式保存在 Vuex 和 cookie 中
         * @param {string} data 文件展示模式
         */
        changeFileModel(data:any) {
            localStorage.setItem('file_model', data);
            this.$state.fileModel = data;
        },
        /**
         * 网格模式 & 时间线模式 改变文件图标大小
         * @description 文件图标大小保存在 Vuex 和 cookie 中
         * @param {string} data 文件图标大小
         */
        changeGridSize(data:any) {
            localStorage.setItem('grid_size', data);
            this.$state.gridSize = data;
        },
        /**
         * 设置批量操作模式下被选中的文件列表
         * @param {array} data 批量操作模式下，被选中的文件列表
         */
        changeSelectedFiles(data:any) {
            this.$state.selectedFiles = data;
        },
        /**
         * 设置是否批量操作
         * @param {boolean} data 是否批量操作
         */
        changeIsBatchOperation(data:any) {
            this.$state.isBatchOperation = data;
        },
        /**
         * 改变屏幕宽度
         * @description 表格显示列保存在 Vuex 和 cookie 中
         * @param {object} state Vuex 的 state 对象
         * @param {[]} data 屏幕宽度
         */
        changeScreenWidth( data:number) {
            this.$state.screenWidth = data
        }
    }

})



